<template>
    <div class="psxbox">
     
     <div class="onerow">
       <!-- 显示 echarts 的容器 -->
      <div id="tu1" style="width: 600px; height: 270px" ref="echarts-container">
      </div>
      <div id="tu2" style="width: 517px; height: 311px; border:1px solid #E7E7E7" ref="echarts-container2"></div>
     </div>
        <!-- 表格 -->
     <div class="table">
      <el-table
      :data="tableData"
      border
      style="width: 100%">
      <el-table-column
        prop="num"
        label="普通用户"
        width="180">
      </el-table-column>
      <el-table-column
      prop="num1"
        label="lv.1用户"
        width="180">
      </el-table-column>
      <el-table-column
      prop="num2"
        label="lv.2用户">
      </el-table-column>
      <el-table-column
      prop="num3"
        label="lv.3用户">
      </el-table-column>
      <el-table-column
      prop="num4"
        label="lv.4用户">
      </el-table-column>
      <el-table-column
      prop="num5"
        label="lv.5用户">
      </el-table-column>
      <el-table-column
      prop="num6"
        label="lv.6用户">
      </el-table-column>
      <el-table-column
      prop="num7"
        label="lv.7用户">
      </el-table-column>
    </el-table>
     </div>
     <!-- 中国地图 -->
     <div class="chain">
        <!-- 写个div用来留给Echart来画图 -->
        <div ref="mymap" style="width:955px;height:446px; border:1px solid #E7E7E7">
          <img src="http://127.0.0.1:7001/public/ditu.png" class="ditu" alt="">
        </div>
    </div>
    <!-- 纵向图 -->
    <div class="claso">
      <div id="tu3" style="width: 961px; height: 600px; border:1px solid #E7E7E7" ref="echarts-container3"></div>
    </div>
    </div>
  </template>
  
  <script>
  import * as echarts from 'echarts/core';
  import {
    TitleComponent,
    TooltipComponent,
    GridComponent,
    LegendComponent,
    MarkLineComponent
  } from 'echarts/components';
  import { PieChart } from 'echarts/charts';
  import { LabelLayout } from 'echarts/features';
  import { CanvasRenderer } from 'echarts/renderers';
  import { BarChart } from 'echarts/charts';
  // import { CanvasRenderer } from 'echarts/renderers';
  echarts.use([
    TitleComponent,
    TooltipComponent,
    LegendComponent,
    PieChart,
    CanvasRenderer,
    BarChart,
    GridComponent,
    MarkLineComponent,
    LabelLayout
  ]);
  
  export default {
    name: "app",
    data: function () {
      return {
        tableData: [{
           num:'2345个' ,
            num1:'654个'  ,     
            num2:'123个',
            num3:'354个',
            num4:'217个',
            num5:'321个',
            num6:'214个',
            num7:'24个',
        }
        ],
        // 以后要修改表格,直接修改 options 里的参数就可以
        options: {
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            bottom: 'bottom'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 1, name: 'lv.1用户' },
                { value: 10, name: 'lv.2用户' },
                { value: 5, name: 'lv.3用户' },
                { value: 10, name: 'lv.4用户' },
                { value: 3, name: 'lv.5用户' },
                { value: 5, name: 'lv.6用户' },
                { value: 4, name: 'lv.7用户' }
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        options2:{
          title: {
            text: '占比',
            left: 'center'
          },
          tooltip: {
            trigger: 'item'
          },
          legend: {
            orient: 'vertical',
            bottom: 'bottom'
          },
          series: [
            {
              name: 'Access From',
              type: 'pie',
              radius: '50%',
              data: [
                { value: 50, name: '男' },
                { value: 48, name: '女' },
              ],
              emphasis: {
                itemStyle: {
                  shadowBlur: 10,
                  shadowOffsetX: 0,
                  shadowColor: 'rgba(0, 0, 0, 0.5)'
                }
              }
            }
          ]
        },
        options3 : {
          title: {
      text: '会员增长情况',
      left: 'center'
    },
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    legend: {
      orient: 'vertical',
            bottom: 'bottom'
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: [
      {
        type: 'category',
        data: ['一月', '二月', '三月', '四月', '五月', '六月']
      }
    ],
    yAxis: [
      {
        type: 'value'
      }
    ],
    series: [
      {
        name: '一月',
        type: 'bar',
        emphasis: {
          focus: 'series'
        },
        data: [320, 332, 301, 334, 390, 330, 320]
      },
      {
        name: '二月',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [120, 132, 101, 134, 90, 230, 210]
      },
      {
        name: '三月',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [220, 182, 191, 234, 290, 330, 310]
      },
      {
        name: '四月',
        type: 'bar',
        stack: 'Ad',
        emphasis: {
          focus: 'series'
        },
        data: [150, 232, 201, 154, 190, 330, 410]
      },
      {
        name: '五月',
        type: 'bar',
        data: [862, 1018, 964, 1026, 1679, 1600, 1570],
        emphasis: {
          focus: 'series'
        },
        markLine: {
          lineStyle: {
            type: 'dashed'
          },
          data: [[{ type: 'min' }, { type: 'max' }]]
        }
      },
      {
        name: '六月',
        type: 'bar',
        barWidth: 5,
        stack: 'Search Engine',
        emphasis: {
          focus: 'series'
        },
        data: [620, 732, 701, 734, 1090, 1130, 1120]
      },
    ]
  },
      }
    },
    methods: {
     
      createEcharts() {
        // 基于准备好的dom，初始化echarts实例
        let myChart = echarts.init(this.$refs["echarts-container"]);
        let myChart2 = echarts.init(this.$refs["echarts-container2"]);
        let myChart3 = echarts.init(this.$refs["echarts-container3"]);
        
        myChart.setOption(this.options);
        myChart2.setOption(this.options2);
        myChart3.setOption(this.options3);
      }
    },
    mounted () {
      this.createEcharts()
      // this.getEchartData();
    }
  }
  </script>
  <style>
  .psxbox{
  width:100%;
  height: 95%;
  margin-top: 15px;
  padding: 20px;
  }
  .onerow{
    display: flex;
    justify-content: space-between
  }
  .table{
    margin-top: 30px;
  }
  .claso{
    width: 100%;
    display: flex;
    margin-top: 30px;
    justify-content: space-around
  }
  .chain{
    width: 100%;
    display: flex;
    margin-top: 30px;
    justify-content: space-around
  }
  .ditu{
    width: 100%;
    height: 100%;
  }
  </style>
  